<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">

        </div>
      </div>
    </div>
    <!-- 注册之后跳转found页，填写简历 -->
    <div class="content">
      <div class="logo">
        <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        <img src="../../assets/bg.png" alt="" class="logo-bg"/>
      </div>

	  <!-- 公司账号密码登录 -->
      <div class="content" v-show="act==0">
        <p>公司密码登录</p>
        <div class="head-title">
          <input type="text" v-model="loginAccountName" placeholder="用户名1" @blur="accountNameBlur" />
        </div>
        <div class="head-title">
          <input type="password" v-model="loginPassword" placeholder="密码" @blur="PasswordBlur"/>
        </div>
        <div class="head-btn" @click="loginComUser">登录</div>
        <div class="bottom">
          <span @click="on(1)">快捷登录</span>
          <span>|</span>
          <span @click="on(2)">立即注册</span>
          <span>|</span>
          <span @click="on(4)">忘记密码</span>
           <span>|</span>
          <span @click="on(5)">个人登录</span>
        </div>
      </div>

      <!-- 公司账号快捷登录 -->
      <div class="content" v-show="act==1">
        <p>快捷登录</p>
        <div class="head-title">
          <input type="text" v-model="loginPhone" placeholder="请输入手机号"  @blur="loginPhoneBlur"/>
          <span @click="getCode()">获取验证码</span>
        </div>
        <div class="head-title">
          <input type="text" v-model="loginPhoneCode" placeholder="请填写验证码"  @blur="loginPhoneCodeBlur"/>
        </div>
        <div class="head-btn" @click="phoneLogin()">登录</div>
        <div class="bottom">
          <span @click="on(0)">密码登录</span>
          <span>|</span>
          <span @click="on(2)">立即注册</span>
        </div>
      </div>

    </div>
    <img src="../../assets/login.jpg" alt="" class="bg" />
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  inject: ['reload'],
  name: 'companyLogin',
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
	 localStorage.status = 0
  },
  mounted () {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data () {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      act: 0,
	  accountName: '',
	  password: '',
      accountNameCo: '',
      passwordCo: '',
	  mobile: '',
	  loginAccountName: '',
	  loginPassword: '',
	  loginPhone: '',
	  loginPhoneCode: ''
    }
  },
  // methods 编写js函数
  methods: {
    accountNameBlur () {
      if (this.loginAccountName === null || this.loginAccountName === '') {
        Toast('请输入用户名')
      }
    },

    PasswordBlur () {
      if (this.loginPassword === null || this.loginPassword === '') {
        Toast('请输入密码')
      }
    },
    loginPhoneBlur () {
      if (this.loginPhone === null || this.loginPhone === '') {
        Toast('请输入手机号')
      }
    },

    loginPhoneCodeBlur () {
      if (!this.loginPhoneCode) {
        Toast('请输入验证码')
      }
    },
    back () {
      this.$router.go(-1) // 返回上一层
    },
    on (n) {
      // this.act=n;
	  if (n === 5) {
	      this.$router.push('/usersLogin')
	      return
	  }
	  if (n === 2) {
	    this.$router.push('/companyRegister')
	  }
	  if (n === 1) {
	  	this.act = n
	  }
	  if (n === 0) {
	  		  this.act = n
	  }
    },
    // 获取手机验证码
    getCode () {
      if (this.loginPhone === '') {
        Toast('请输入手机号')
        return
      }
      this.$http({
        method: 'post',
        url: this.AppURL + '/comuser/sendCode',
        params: {
          mobile: this.loginPhone
        }
      })
        .then(({data}) => {
          // 弹出后台返回信息
		  Toast(data.result.msg)
        })
    },
    // 手机验证码登录
    phoneLogin () {
      if (this.loginPhone === '') {
        Toast('请输入手机号')
        return
      }
      if (this.loginPhoneCode === '') {
        Toast('请输入手机验证码')
        return
      }
      this.$http({
        method: 'post',
        url: this.AppURL + '/comuser/loginMobile',
        params: {
          mobile: this.loginPhone,
          code: this.loginPhoneCode
        }
      })
        .then(({data}) => {
          // 登录成功
          if (data.result.code === 200) {
					  localStorage.status = 1
					  // 把userId存入localStorage中
					  localStorage.setItem('userId', data.result.companyUser.userId)
					  console.log('获取userid====', localStorage.getItem('userId'))
					  // 登录成功后跳转首页
					  this.$router.push('/')
          } else {
					  // 弹出信息
					  Toast(data.result.msg)
          }
        })
    },
    // 公司账号密码登录账号
    loginComUser () {
	  // 校验账号不能为空
	  if (this.loginAccountName == '') {
	  	Toast('账号不能为空')
	  	return
	  }
      // 校验密码不能为空
	  if (this.loginPassword == '') {
	  	Toast('密码不能为空')
	  	return
	  }

      this.$http({
        method: 'post',
        url: this.AppURL + '/comuser/loginCom',
        params: {
          loginAccountName: this.loginAccountName,
          loginPassword: this.loginPassword
        }
      })
        .then(({data}) => {
          if (data && data.result.companyUser.companyId) {
            localStorage.status = 1
            localStorage.setItem('userId', data.result.companyUser.id)
            localStorage.setItem('cache_company_id', data.result.companyUser.companyId)
            this.$router.push('/companyMy')
            return
          }
          localStorage.status = 1
          localStorage.setItem('userId', data.result.companyUser.id)
          console.log(localStorage.getItem('userId'))
          // eslint-disable-next-line no-mixed-spaces-and-tabs,no-tabs
		      this.$router.push('/means')
        })
        .catch(e => {
          Toast('账号或密码错误')
        })
    },

    // 注册公司账号
    registerCoAccount () {
      this.$http({
        method: 'get',
        url: 'api/comuser/registerUserCom',
        params: {
          accountName: this.accountNameCo,
          password: this.passwordCo
        }
      }).then(({data}) => {
        if (data.code == 200) { // 注册成功跳转密码登录页
          this.on(0)
        }
      })
    }
  }
}
</script>

Add "scoped" attribute to limit CSS to this component only
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #3e63a8;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.back {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  z-index: 999;
}
.logo {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  justify-content: center;
  padding-top: 20px;
}
.logo .logo-bg {
  /* width: 100%; */
  height: 150px;
}
.content {
  position: relative;
  z-index: 999;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.content p {
  font-size: 14px;
  text-align: center;
  color: #fff;
  padding-top: 10px;
}
.head-title {
  flex: 1;
  width: 70%;
  box-sizing: border-box;
  padding: 0 10px;
  background: #fff;
  display: flex;
  align-items: center;
  height: 40px;
  margin: 10px 0;
}
.head-title span {
  font-size: 12px;
  padding-left: 10px;
}
.head-title input {
  border: 0;
  flex:1;
  outline: none;
  font-size: 12px;
}
::-webkit-input-placeholder {
  font-weight: 100;
} /* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-weight: 100;
} /* Firefox版本4-18 */
::-moz-placeholder {
  font-weight: 100;
} /* Firefox版本19+ */
:-ms-input-placeholder {
  font-weight: 100;
}
.head-btn {
  background: #f4cf4f;
  width: 70%;
  font-size: 14px;
  text-align: center;
  color: #3e63a8;
  height: 35px;
  line-height: 35px;
}
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.con-box {
  width: 100%;
}
.bottom{
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-around;
  padding-top: 20px;
}
</style>
